<template>
    <div class="ele-stars">
        <span class="ele-stars-item" v-for="value in ClassItem" :class="value">
        </span>
    </div>
</template>

<script>
    export default {
        name: "stars",
        data() {
            return {
                //五次循环
                normalStar: 5
            }
        },
        props: {
            score: {
                type: Number,
                default: 0
            }
        },
        computed: {
            ClassItem() {
                var classList = [];
                //    获取sorce 整数部分
                var len = Math.floor(this.score);
                var point = this.score % 1;
                //    循环
                for (var i = 0; i < 5; i++) {
                    if (len > i) {
                        classList.push("ele-normal-star")
                    } else if (point !== 0) {
                        classList.push("ele-half-star")
                    } else {
                        classList.push("ele-un-star")
                    }
                }
                return classList;
            }
        }
    }
</script>

<style>
    .ele-stars{
        display: inline-block;
    }
    .ele-stars-item{
        display: inline-block;
        height: 20px;
        width: 20px;
        background-size: cover;
    }
    .ele-stars-item:last-child{
        margin-right: 0;
    }
    .ele-normal-star{
        background-image: url("../assets/img/star36_on@2x.png");
    }
    .ele-half-star{
        background-image: url("../assets/img/star24_half@2x.png");
    }
    .ele-un-star{
             background-image: url("../assets/img/star36_off@2x.png");
         }

</style>
